<template>
  <div class="all">
    <div class="person" v-for="(message1,index) in message" :key="index">
      <div>
        <img src="https://elm.cangdu.org/img/default.jpg" alt="" class="head">
      </div>
      <div class="body">
        <div class="user">
          <span class="username">{{message1.username}}</span>
          <span class="time">{{message1.rated_at}}</span>
        </div>
        <van-rate class="myrate" v-model="message1.rating_star" allow-half void-icon="star" color="rgb(255,154,13)"
          readonly :size="6" />
        <span class="ontime">{{message1.time_spent_desc}}</span>
        <div class="food">
          <div v-for="(message2,index) in message1.item_ratings" :key="index" class="food1">
            <div>
              <img v-if="message2.image_hash !=''"
                :src="'https://fuss10.elemecdn.com'+'/'+message2.image_hash.slice(0,1)+'/'+message2.image_hash.slice(1,3)+'/'+message2.image_hash.slice(3,36)+'.jpeg'"
                alt="" class="foodImg">
            </div>
          </div>
        </div>
        <!-- <div v-for="(message2,index) in message1.item_ratings" :key="index" class="food1">
          <img src="//elm.cangdu.org/img/default.jpg" alt="" class="head">
          <span class="username">
            {{message1.username}}
          </span>
          <span class="time">
            {{message1.rated_at}}
          </span>
          <br> -->
        <!-- <van-rate class="myrate" v-model="message1.rating_star" allow-half void-icon="star" color="rgb(255,154,13)"
            readonly :size="6" />
          <span class="ontime">
            {{message1.time_spent_desc}}
          </span>
          <br> -->
        <!-- <div class="food" v-for="(message2,index) in message1.item_ratings" :key="index">
        <div class="food1">
          <img v-if="message2.image_hash !=''"
            :src="'https://fuss10.elemecdn.com'+'/'+message2.image_hash.slice(0,1)+'/'+message2.image_hash.slice(1,3)+'/'+message2.image_hash.slice(3,36)+'.jpeg'"
            alt="">
          <p class="namep">
            {{message2.food_name}}
          </p>
        </div>
      </div> -->

      </div>
    </div>
  </div>
  <!-- </div> -->
</template>
<script>
  export default {
    data() {
      return {

      }
    },
    props: ['message'],

  }
</script>
<style lang="less" scoped>
  .all {
    width: 100%;
    background-color: white;
    margin-top: -20px;
    padding-top: 10px;
  }

  .head {
    border-radius: 50%;
    width: 40px;
    float: left;
  }

  .person {
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #f7f3f3;
    overflow: hidden;
  }

  .head {
    width: 40px;
    border-radius: 50%;
    margin: 0 10px;
  }

  .body {
    width: 80%;
  }

  .user {
    display: flex;
    justify-content: space-between;
  }

  .user .username {
    color: gray;
    float: left;
  }

  .user .time {
    color: gray;
    float: right;
    margin-right: 15px;
    font-size: 13px;
  }

  .foodImg {
    width: 80px;
  }

  .myrate {
    margin: 5px 0;
  }

  .ontime {
    color: gray;
    font-size: 13px;
    line-height: 18px;
    margin-left: 8px;
  }

  .food {
    overflow: hidden;
  }

  .food1 {
    float: left;
    margin-right: 10px;
  }

  .namep {
    width: 50px;
    color: gray;
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 10px;
    border: 1px solid #f7f3f3;
    padding: 3px;
    text-align: center;
    margin-bottom: 15px;
  }
</style>